<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/muistyle.css" />
	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>
	<script type="text/javascript">
		//根据浏览器获取屏幕大小
		(function (doc, win) {
			var docEl = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
				recalc = function () {
					var clientWidth = docEl.clientWidth;
					if (!clientWidth) return;
					docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
					/*docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';*/
				};
			if (!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">签到</h1>
	</header>
	<div class="mui-content">
		<div class="mui-signinimg">
			<img src="images/q_signinbanner.png" />
			<!--签到区域模块开始-->
			<div class="mui-signCtent">
				<div class="rightCon">
					<div class="signLogoImg floatL marginT1"></div>
					<div class="signLogoImg floatL marginT1"></div>
					<div class="signLogoImg floatL marginT1"></div>
					<div class="signLogoImg floatL marginT1"></div>
					<div class="signLogoImg floatL marginT1"></div>
					<div class="signLogoImg floatL marginT1"></div>
					<div class="signLogoImg floatL marginT1 signLogoGift keyframes"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatL signGiftTwo keyframes"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatR"></div>
					<div class="signLogoImg floatL"></div>
					<div class="signLogoImg floatL signGiftThree keyframes"></div>

				</div>
			</div>
			<!--签到区域模块结束-->
			<div class="mui-signTxt">
				<p class="mui-txtimg">
					<img src="images/q_signinpressed.png" />
				</p>
				<p class="mui-txtTwo">明日签到可获得
					<span>2赚币</span>
				</p>
			</div>
			<ul class="mui-signBtn">
				<li class="mui-signbtnBg mui-pull-left">
					<a href="#">可用赚币
						<span>x80</span>
					</a>
				</li>
				<li class="mui-signbtnBg2 mui-pull-left">
					<a href="#" class="mui-signBtna">赚币商城</a>
				</li>
			</ul>
			<!--绑卡任务列表-->
			<ul class="mui-signtxtCon">
				<li class="signtxt-list">
					<div class="signtxt-left">
						<p class="signtxt-p1">
							<img src="images/q_bangka.png" alt="卡片" />
						</p>
						<div class="sign-task">
							<p class="p1">绑卡任务</p>
							<p class="p2">首次绑卡奖励
								<span>30枚赚币</span>
							</p>
						</div>
					</div>
					<div class="sign-right">
						<a href="#">
							<img src="images/q_btngo.png" alt="" />
						</a>
					</div>
				</li>
				<li class="signtxt-list signtxt-list2">
					<div class="signtxt-left">
						<p class="signtxt-p1">
							<img src="images/q_touzi.png" alt="投资" />
						</p>
						<div class="sign-task">
							<p class="p1">投资任务</p>
							<p class="p2">首次投资奖励
								<span>100枚赚币</span>
							</p>
						</div>
					</div>
					<div class="sign-right">
						<a href="#">
							<img src="images/q_btngo.png" alt="" />
						</a>
					</div>
				</li>
			</ul>
			<!--签到规则-->
			<div class="sign_rule">
				<ul class="sign_ruletxt">
					<li class="txtlist1">
						<img src="images/q_star.png" />
					</li>
					<li class="txtlist2">签到规则</li>
					<li class="txtlist3">
						<img src="images/q_star.png" alt="" />
					</li>
				</ul>
				<p>1.连续签到7天得0.5%加息券；连续签到20天得1%加息券；连续签到30天得2%加息券；</p>
				<p>2.每日连续签到还可获得相应赚币，可去“赚币商城”兑换礼物。如若签到中断，将重新从1个赚币开始领取；</p>
				<p>3.完成指定任务可获取规定数量赚币；</p>
				<p>4.本活动严禁任何作弊行为，一经发现可取消客户获得奖励；</p>
				<p style="text-align: center;margin: 0.5rem 0.5rem;font-size: 0.23rem;">本活动解释归赚吧理财所有</p>
			</div>
			<!--签到赚币弹窗-->
			<div id="sign-modal" class="sign-modal">
				<div class="modal-content">
					<div class="modal-header">
						<img src="images/q_lingqu/q_jxdelete.png" class="close">
					</div>
					<ul class="modal-contentList">
						<li class="modal-hongbao"></li>
						<a href="#">
							<li class="modal-jiaxi"></li>
						</a>
					</ul>
				</div>
				<div>
					<img src="images/q_lingqu/b1.png" id="whereImg">
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		// 页面在开始加载的时候，向后台请求数据

		window.onload = function lib_init() {

			// // 向后台请求数据并做交互
			// // var address_url = "operSige/sign.json";
			// mui.post(address_url, { 'req_hd': ukey },request(data), 'json');
			//request(data)为请求成功后的回调函数，其中的data不用动
		}





///////////////////////////////////////////////////////////////////////////

		// 此处往下是自己造的数据，为请求成功的回调函数的例子
		// 制造数据，数据结构参照请求数据结构
		var data = {
			"res_bd": {
				"gold_sum": 20,
				"isSign": 0,
				"total_sum": 7
			}
		};

// 制造数据结束，以下函数是请求成功后的回调函数


		// 封装请求成功后的回调函数
		function request(data) {
			console.log(data);//打印出来数据
			// 获得数据里面的对象
			var obj = data.res_bd;
			// 首先获得数据里面的isSign，判断是不是已经签到了

			if (obj.isSign) {
				// 已经签到后，执行的逻辑
				alert("你已经签到了");
			} else {
				// 还没有签到的执行的逻辑
				//先将页面的对号显示出来，根据后台数据进行遍历显示对号
				rightBlock(obj.total_sum);
				// 消息弹框显示出来
				var modal = document.getElementById("sign-modal");
				modal.style.display = 'block';
				// 弹框里面应该展示的是什么，这个根据参数total_sum进行判断，>=5天为10金币，有礼物弹礼物
				whereImgs(obj.total_sum);

				// 点击关闭按钮弹框关闭
				mui(".modal-header").on('tap', '.close', function () {
					var modal = document.getElementById("sign-modal");
					modal.style.display = 'none';
				});


				// 当用户点击其中的四个可机交互的按钮时，执行的函数，后续加入
			}
		}




		// 封装判断要弹出来什么奖品的函数
		function whereImgs(num) {
			if (num == 1) {
				document.getElementById("whereImg").src = "images/q_lingqu/b1.png";
			} else if (num == 2) {
				document.getElementById("whereImg").src = "images/q_lingqu/b2.png";
			} else if (num == 3) {
				document.getElementById("whereImg").src = "images/q_lingqu/b4.png";
			} else if (num == 4) {
				document.getElementById("whereImg").src = "images/q_lingqu/b8.png";
			} else if (num == 7) {
				document.getElementById("whereImg").src = "images/q_lingqu/x1.png";
			} else if (num == 20) {
				document.getElementById("whereImg").src = "images/q_lingqu/x2.png";
			} else if (num == 30) {
				document.getElementById("whereImg").src = "images/q_lingqu/x3.png";
			} else {
				document.getElementById("whereImg").src = "images/q_lingqu/b10.png";
			}
		}

		// 封装对号显示函数
		function rightBlock(m) {
			// 获得所有的有对号的div
			var objs = document.getElementsByClassName("signLogoImg");
			// 根据累计签到的天数进行遍历
			for (var i = 0; i < m; i++) {
				objs[i].innerHTML = "<img src='images/q_toast_duihao.png'>";
				if (i == 6 || i == 19 || i == 29) {
					objs[i].innerHTML = " ";
				}
			}
		}





		request(data);//接口调通后注释掉

// 结束
////////////////////////////////////////////////////////////////////////
	</script>
</body>

</html>